<template>
	<div class="container">
		<div class="content">
			<div class="panel">
				<div class="logo" @click="openHomePage()"></div>
				<div class="title">登录</div>
				<div class="tab_bar">
					<div class="tab" :class="tab=='验证码'? 'tab_active':''" @click="tab='验证码'">
						验证码登录
					</div>
					<div class="tab" :class="tab=='密码'? 'tab_active':''" @click="tab='密码'">
						密码登录
					</div>
				</div>
				
				<div class="row row_1">
					<div class="icon"></div>
					<span class="prefix">86+</span>
					<input class="input username" v-model="param.username" type="text" 
						   autocomplete="off" spellcheck="false" placeholder="输入手机号码" maxLength="20"/>
				</div>
				<div class="row row_2" v-show="tab=='验证码'">
					<div class="icon"></div>
					<input class="input captcha" v-model="param.captcha" maxLength="20"
						   placeholder="输入短信验证码" type="text" autocomplete="off" spellcheck="false"/>
					<div class="code" :class="codeTime>0?'code_wait':''" @click="getCode()">{{codeMsg}}</div>
				</div>
				<div class="row row_3" v-show="tab=='密码'">
					<div class="icon"></div>
					<input class="input password" v-model="param.password" type="password"
						   autocomplete="new-password" placeholder="输入密码" maxLength="20"/>
				</div>
				
				<div class="btn_div">
					<div class="remember" :class="remember? 'remember_active':''" @click="remember=!remember">
						15天内免登录
					</div>
					<div class="forget" v-show="tab=='密码'" @click="openForget()">
						忘记密码
					</div>
				</div>
				
				
				<div class="sure_btn" @click="login()">登 录</div>
				<div class="tip">
					没有账号&emsp;
					我要<span class="tip_btn" @click="openRegister()">注册</span>
				</div>
				
			</div>
			<div class="remark">
				<!--Powered By EduSoho v8.3.26 2014-2019<br/>
				课程内容版权均归 威创集团股份有限公司 所有 ICP备13006852号-1-->
			</div>
		</div>
	</div>
</template>

<script>
	
var vm;
export default {
	data : function() {
		return {
			tab : "验证码",
			remember : true,
			codeMsg : "获取验证码",
			codeTime : 0,
			param : {
				username : "",
				password : "",
				phone : "",
				captcha : ""
			},
		}
	},
	methods : {
		openHomePage : function() {
			router.push("/");
		},
		openRegister : function() {
			router.push("/account/register");
		},
		openForget : function() {
			router.push("/account/forget_password");
		},
		getCode : function() {
			//等待验证码过程,不允许再点
			if(vm.codeTime>0) {
				return;
			}
//			//获取上次获取验证码时间和当前时间
//			var lastTime = tool.getItem(lsKey.codeTime);
//			var nowTime = new Date().getTime();
//			//两次时间小于60s,不允许再点
//			if(lastTime && (nowTime-lastTime<60000)) {
//				tool.message({type:"warning",message:"获取验证码操作频繁，请稍候再试"})
//				return;
//			}
			
			var rules = [{
				judge : tool.judge("phone", vm.param.username),
				tips : tips.phone
			}]
			if(!tool.validate(rules)) {
				return;
			}
			
			//请求发送验证码接口
			api.captcha({phoneNumber : vm.param.username}).then(function(data){
				
				if(data.resultCode == 4025) {
					tool.message({type:"warning",message:"短信发送失败，请检查手机号码是否正确"});
				}
				if(data.resultCode == 4033) {
					tool.message({type:"warning",message:"获取验证码操作频繁，请稍候再试"});
				}
				if(data.resultCode == 2000) {
					tool.message({type:"success",message:"已发送验证码"});
					//保存本次获取验证码时间
//					tool.setItem(lsKey.codeTime, nowTime);
					//重设等待时间,执行等待循环
					vm.codeTime = 61;
					vm.waitCode();
				}
			})
			
		},
		waitCode : function() {
			vm.codeTime--;
			
			//还未减到0,更新提示时间
			if(vm.codeTime>0) {
				vm.codeMsg = vm.codeTime+" s"
				setTimeout(vm.waitCode,1000);
				return;
			}
			//已减到0,复原状态
			vm.codeMsg = "获取验证码";
		},
		login : function() {
			vm.param.phone = vm.param.username;
			
			//校验信息
			var rules = [{
				judge : tool.judge("phone",vm.param.username),
				focus : $(".username"),
				tips : tips.phone
			}];
			if(vm.tab=="验证码") {
				rules.push({
					judge : vm.param.captcha,
					focus : $(".captcha"),
					tips : tips.captcha
				});
			} else {
				rules.push({
					judge : tool.judge("password",vm.param.password),
					focus : $(".password"),
					tips : tips.password
				});
			}
			if(!tool.validate(rules)) {
				return;
			}
			
			var fun = (vm.tab=="验证码"? api.loginCaptcha(vm.param) : api.login(vm.param) );
			fun.then(function(data) {
				
				//登录成功
				if(data.resultCode == 2000) {
					//根据是否免登录,决定保存token时要不要携带sessionId
					if(vm.remember) {
						tool.setItem(lsKey.token, [data.token], true);
					} else {
						let sessionId = sessionStorage.getItem(ssKey.sessionId);
						tool.setItem(lsKey.token, [data.token, sessionId], true);
					}
					//请求用户信息
					return api.studentUserInfo();
				}
				
				if(data.resultCode == 4026) {
					tool.message({showClose: true, message:"验证码错误", type:"warning" });
				}
				if(data.resultCode == 4029) {
					tool.message({showClose: true, message: "账号不存在", type: 'warning'});
				}
				if(data.resultCode == 4030) {
					tool.message({showClose: true, message: "密码错误", type: 'warning'});
				}
				if(data.resultCode == 4031) {
					tool.message({showClose: true, message: "账号已锁定，请联系管理员", type: 'warning'});
				}
				if(data.resultCode == 4034) {
					tool.message({showClose: true, message:"尚未设置密码，请通过忘记密码重设或验证码登录", type:"warning" });
				}
				
				//登录失败,结束请求
				return Promise.reject();
				
			}).then(function(data) {
				//保存用户信息,跳转首页
				vm.$store.commit("setUser", data.info);
				
				//获取上一个被跳转过来的页面路径
				var fromPath = $route.params.fromPath;
				//若存在,则登录后跳回去
				if(fromPath){
					router.push({path:fromPath});
				}else{
					router.push({name:"我的课程"});
				}
				
				
			}).catch(function(){
			});
			
		},
	},
	created : function() {
		vm = this;
	}
}
</script>

<style scoped src="../../style/account/login.css"></style>